<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 5 A First Look - Alerts | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.19 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 5 A First Look - Alerts | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="yihui/bookdown-crc" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 5 A First Look - Alerts | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-06-09" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="introduction-1.html"/>
<link rel="next" href="a-complete-integration-jbox-js.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">R and JavaScript</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#disclaimer"><i class="fa fa-check"></i>Disclaimer</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#rationale"><i class="fa fa-check"></i>Rationale</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#prerequisites"><i class="fa fa-check"></i>Prerequisites</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#package-development"><i class="fa fa-check"></i>Package Development</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#json"><i class="fa fa-check"></i>JSON</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#javascript"><i class="fa fa-check"></i>JavaScript</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#methods"><i class="fa fa-check"></i>Methods</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#v8"><i class="fa fa-check"></i>V8</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i>htmlwidgets</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i>Shiny</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#reactr"><i class="fa fa-check"></i>reactR</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#bubble"><i class="fa fa-check"></i>bubble</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#r2d3"><i class="fa fa-check"></i>r2d3</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II JavaScript for Computations</b></span></li>
<li class="chapter" data-level="2" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>2</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i>Installation</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i>External Libraries</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i>With Npm</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="node.html"><a href="node.html"><i class="fa fa-check"></i><b>3</b> Node.js with Bubble</a>
<ul>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#basics-1"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#r-markdown-engine"><i class="fa fa-check"></i>R Markdown Engine</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#npm"><i class="fa fa-check"></i>Npm</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#use-in-packages-1"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="4" data-path="introduction-1.html"><a href="introduction-1.html"><i class="fa fa-check"></i><b>4</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#static-files"><i class="fa fa-check"></i>Static Files</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="a-first-look-alerts.html"><a href="a-first-look-alerts.html"><i class="fa fa-check"></i><b>5</b> A First Look - Alerts</a>
<ul>
<li class="chapter" data-level="" data-path="a-first-look-alerts.html"><a href="a-first-look-alerts.html#from-r-to-javascript"><i class="fa fa-check"></i>From R to JavaScript</a></li>
<li class="chapter" data-level="" data-path="a-first-look-alerts.html"><a href="a-first-look-alerts.html#from-javascript-to-r"><i class="fa fa-check"></i>From JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="a-first-look-alerts.html"><a href="a-first-look-alerts.html#deserialise"><i class="fa fa-check"></i>Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html"><i class="fa fa-check"></i><b>6</b> A Complete Integration - jBox.js</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#serialisation"><i class="fa fa-check"></i>Serialisation</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#events-callbacks"><i class="fa fa-check"></i>Events &amp; Callbacks</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#as-a-package"><i class="fa fa-check"></i>As a Package</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#dependencies"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#r-code"><i class="fa fa-check"></i>R Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#javascript-code"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#input-handler"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#wrapping-up"><i class="fa fa-check"></i>Wrapping up</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#exercises"><i class="fa fa-check"></i>Exercises</a></li>
</ul></li>
<li class="part"><span><b>IV Data Visualisation</b></span></li>
<li class="chapter" data-level="7" data-path="introduction-2.html"><a href="introduction-2.html"><i class="fa fa-check"></i><b>7</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#candidate-libraries"><i class="fa fa-check"></i>Candidate Libraries</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#plotly"><i class="fa fa-check"></i>Plotly</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#highchart.js"><i class="fa fa-check"></i>Highchart.js</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#chart.js"><i class="fa fa-check"></i>Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#how-it-works"><i class="fa fa-check"></i>How it works</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>8</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#the-scaffold"><i class="fa fa-check"></i>The Scaffold</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#deconstruct-the-output"><i class="fa fa-check"></i>Deconstruct the Output</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#javascript-renderer"><i class="fa fa-check"></i>JavaScript Renderer</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html"><i class="fa fa-check"></i><b>9</b> A Realistic Widget - Typed.js</a>
<ul>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#dependency"><i class="fa fa-check"></i>Dependency</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#javascript-1"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#html-element"><i class="fa fa-check"></i>HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html"><i class="fa fa-check"></i><b>10</b> The Full Monty - Gio.js</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#dependencies-1"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#javascript-2"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#working-with-data"><i class="fa fa-check"></i>Working with Data</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#transforming-data"><i class="fa fa-check"></i>Transforming Data</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#in-javascript"><i class="fa fa-check"></i>In JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#in-r"><i class="fa fa-check"></i>In R</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#pros-cons"><i class="fa fa-check"></i>Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#on-print"><i class="fa fa-check"></i>On Print</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="advanced-usage.html"><a href="advanced-usage.html"><i class="fa fa-check"></i><b>11</b> Advanced Usage</a>
<ul>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#shared-variables"><i class="fa fa-check"></i>Shared Variables</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#sizing"><i class="fa fa-check"></i>Sizing</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#sizing-policy"><i class="fa fa-check"></i>Sizing Policy</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#resizing"><i class="fa fa-check"></i>Resizing</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#pre-render-hooks-safety"><i class="fa fa-check"></i>Pre Render Hooks &amp; Safety</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#javascript-code-1"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#prepend-append-content"><i class="fa fa-check"></i>Prepend &amp; Append Content</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="working-with-shiny.html"><a href="working-with-shiny.html"><i class="fa fa-check"></i><b>12</b> Working with Shiny</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#callback"><i class="fa fa-check"></i>Callback</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler-1"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#r-to-javascript"><i class="fa fa-check"></i>R to JavaScript</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#send-data"><i class="fa fa-check"></i>Send Data</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#retrieve-instance"><i class="fa fa-check"></i>Retrieve Instance</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#use-data"><i class="fa fa-check"></i>Use Data</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="for-the-curious.html"><a href="for-the-curious.html"><i class="fa fa-check"></i><b>13</b> For The Curious</a></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="a-first-look---alerts" class="section level1" number="5">
<h1><span class="header-section-number">Chapter 5</span> A First Look - Alerts</h1>
<p>Making shiny work with JavaScript can essentially be broken down into two operations: 1) passing data from the R server to the JavaScript client and 2) the other way around, from the client to the R server. This chapter covers both ways data travels between R and JavaScript in Shiny.</p>
<p>We first build an application that passes a message from the R server to the client to display said message as a vanilla JavaScript alert (pop-up), then send back to the R server whether the user has clicked “OK” on the alert. Let’s write a straightforward shiny application which includes the JavaScript code that opens an alert.</p>
<div class="sourceCode" id="cb123"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb123-1"><a href="a-first-look-alerts.html#cb123-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb123-2"><a href="a-first-look-alerts.html#cb123-2"></a></span>
<span id="cb123-3"><a href="a-first-look-alerts.html#cb123-3"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb123-4"><a href="a-first-look-alerts.html#cb123-4"></a>  tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb123-5"><a href="a-first-look-alerts.html#cb123-5"></a>    <span class="st">&quot;alert(&#39;Hello from JavaScript&#39;);&quot;</span></span>
<span id="cb123-6"><a href="a-first-look-alerts.html#cb123-6"></a>  ),</span>
<span id="cb123-7"><a href="a-first-look-alerts.html#cb123-7"></a>  <span class="kw">h1</span>(<span class="st">&quot;Hello&quot;</span>)</span>
<span id="cb123-8"><a href="a-first-look-alerts.html#cb123-8"></a>)</span>
<span id="cb123-9"><a href="a-first-look-alerts.html#cb123-9"></a></span>
<span id="cb123-10"><a href="a-first-look-alerts.html#cb123-10"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){}</span>
<span id="cb123-11"><a href="a-first-look-alerts.html#cb123-11"></a></span>
<span id="cb123-12"><a href="a-first-look-alerts.html#cb123-12"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<div class="figure">
<img src="images/alert.png" alt="" />
<p class="caption">JavaScript alert in shiny</p>
</div>
<p>One thing important to note for later is that alerts will always block the execution of code which allows making sure some code is only run with user consent or the user being aware of the consequences.</p>
<div class="sourceCode" id="cb124"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb124-1"><a href="a-first-look-alerts.html#cb124-1"></a><span class="at">alert</span>(<span class="st">&#39;delete everything?&#39;</span>)<span class="op">;</span></span>
<span id="cb124-2"><a href="a-first-look-alerts.html#cb124-2"></a><span class="at">deleteEverythingOnlyIfUserOK</span>()<span class="op">;</span></span></code></pre></div>
<div id="from-r-to-javascript" class="section level2 unnumbered" number="">
<h2>From R to JavaScript</h2>
<p>Now that we have a simple alert displayed in the application we can tie it with our R server; the alert should display a message sent by the R server, this would enable, for instance, displaying a message taken from a database or a user input. As might be expected there are two functions required to do so, an R function and its JavaScript complementary: one to send the data from the server and another to catch said data from the client and display the alert.</p>
<p>Let us start by writing the R code to send the data, thankfully very little is required of the developer. One can send data from the R server to the client from the <code>session</code> object using the <code>sendCustomMessage</code> method. The method takes two arguments, first an identifier (where to send the data to), second the actual data to send to JavaScript.</p>
<div class="sourceCode" id="cb125"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb125-1"><a href="a-first-look-alerts.html#cb125-1"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb125-2"><a href="a-first-look-alerts.html#cb125-2"></a>  <span class="co"># set the identifier to send-alert</span></span>
<span id="cb125-3"><a href="a-first-look-alerts.html#cb125-3"></a>  session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="dt">type =</span> <span class="st">&quot;send-alert&quot;</span>, <span class="dt">message =</span> <span class="st">&quot;Hi there!&quot;</span>)</span>
<span id="cb125-4"><a href="a-first-look-alerts.html#cb125-4"></a>}</span></code></pre></div>
<p>This effectively sends our message to the JavaScript client but we are yet to use that message JavaScript-side so the application still displays the same alert on load. We can add a “handler” for the identifier we defined (<code>send-alert</code>) which will so something with the message we sent from the server. This is done with the <code>addCustomMessageHandler</code> method from the <code>Shiny</code> object where the first argument is the identifier and the second is the function that handles the message, generally a function that takes a single argument: the data sent from the server.</p>
<div class="sourceCode" id="cb126"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb126-1"><a href="a-first-look-alerts.html#cb126-1"></a>tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb126-2"><a href="a-first-look-alerts.html#cb126-2"></a>  <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb126-3"><a href="a-first-look-alerts.html#cb126-3"></a><span class="st">    alert(message);</span></span>
<span id="cb126-4"><a href="a-first-look-alerts.html#cb126-4"></a><span class="st">  });&quot;</span></span>
<span id="cb126-5"><a href="a-first-look-alerts.html#cb126-5"></a>)</span></code></pre></div>
<div class="figure">
<img src="images/alert-shiny.png" alt="" />
<p class="caption">Alert sent from shiny server</p>
</div>
<p>This enables you to pass a message that is taken from a database for instance, or as shown below from a user input, to the alert.</p>
<div class="sourceCode" id="cb127"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb127-1"><a href="a-first-look-alerts.html#cb127-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb127-2"><a href="a-first-look-alerts.html#cb127-2"></a></span>
<span id="cb127-3"><a href="a-first-look-alerts.html#cb127-3"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb127-4"><a href="a-first-look-alerts.html#cb127-4"></a>  tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb127-5"><a href="a-first-look-alerts.html#cb127-5"></a>    <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb127-6"><a href="a-first-look-alerts.html#cb127-6"></a><span class="st">      alert(message);</span></span>
<span id="cb127-7"><a href="a-first-look-alerts.html#cb127-7"></a><span class="st">    });&quot;</span></span>
<span id="cb127-8"><a href="a-first-look-alerts.html#cb127-8"></a>  ),</span>
<span id="cb127-9"><a href="a-first-look-alerts.html#cb127-9"></a>  <span class="kw">h1</span>(<span class="st">&quot;Hello&quot;</span>),</span>
<span id="cb127-10"><a href="a-first-look-alerts.html#cb127-10"></a>  <span class="kw">textInput</span>(<span class="st">&quot;text&quot;</span>, <span class="st">&quot;Text to show in alert&quot;</span>),</span>
<span id="cb127-11"><a href="a-first-look-alerts.html#cb127-11"></a>  <span class="kw">actionButton</span>(<span class="st">&quot;submit&quot;</span>, <span class="st">&quot;Show alert&quot;</span>)</span>
<span id="cb127-12"><a href="a-first-look-alerts.html#cb127-12"></a>)</span>
<span id="cb127-13"><a href="a-first-look-alerts.html#cb127-13"></a></span>
<span id="cb127-14"><a href="a-first-look-alerts.html#cb127-14"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb127-15"><a href="a-first-look-alerts.html#cb127-15"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>submit, {</span>
<span id="cb127-16"><a href="a-first-look-alerts.html#cb127-16"></a>    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="dt">type =</span> <span class="st">&quot;send-alert&quot;</span>, <span class="dt">message =</span> input<span class="op">$</span>text)</span>
<span id="cb127-17"><a href="a-first-look-alerts.html#cb127-17"></a>  })</span>
<span id="cb127-18"><a href="a-first-look-alerts.html#cb127-18"></a>}</span>
<span id="cb127-19"><a href="a-first-look-alerts.html#cb127-19"></a></span>
<span id="cb127-20"><a href="a-first-look-alerts.html#cb127-20"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<p>In the application above, notice the path that our message follows: it goes from the client to the server which sends it back to the client. This might be considered suboptimal by some as it is not necessary to use the server as intermediary (in this example at least). Though there is some truth to this the above will work perfectly fine—and our aim here is to make JavaScript work with R—not alongside it.</p>
</div>
<div id="from-javascript-to-r" class="section level2 unnumbered" number="">
<h2>From JavaScript to R</h2>
<p>Imagine if you will that instead of displaying a somewhat anodyne alert it was one that actually mattered where the user is warned that clicking “OK” will execute an irreversible action like the deletion of a record. In order to implement this the server would need to “know” whether the user has clicked said “OK” button. To do so one needs to pass data from the client to the server.</p>
<p>This can be done by defining a new <em>simplified</em> shiny input. While one can define a fully-fledged shiny input that can be registered, updated, etc. there is also a simplified version of the latter which allows sending reactive input value to the server where it can be used just like any other inputs (<code>input$id</code>). The value of the input can be defined using the <code>setInputValue</code> method which takes the id of the input and the value to give it.</p>
<div class="sourceCode" id="cb128"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb128-1"><a href="a-first-look-alerts.html#cb128-1"></a>tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb128-2"><a href="a-first-look-alerts.html#cb128-2"></a>  <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb128-3"><a href="a-first-look-alerts.html#cb128-3"></a><span class="st">    </span></span>
<span id="cb128-4"><a href="a-first-look-alerts.html#cb128-4"></a><span class="st">    // show alert</span></span>
<span id="cb128-5"><a href="a-first-look-alerts.html#cb128-5"></a><span class="st">    alert(message);</span></span>
<span id="cb128-6"><a href="a-first-look-alerts.html#cb128-6"></a></span>
<span id="cb128-7"><a href="a-first-look-alerts.html#cb128-7"></a><span class="st">    // set to true when clicked OK</span></span>
<span id="cb128-8"><a href="a-first-look-alerts.html#cb128-8"></a><span class="st">    Shiny.setInputValue(&#39;delete_alert&#39;, true);</span></span>
<span id="cb128-9"><a href="a-first-look-alerts.html#cb128-9"></a><span class="st">  });&quot;</span></span>
<span id="cb128-10"><a href="a-first-look-alerts.html#cb128-10"></a>)</span></code></pre></div>
<p>As mentioned earlier <code>alert</code> blocks code execution, therefore the input value will not be defined before the button “OK” is pressed. The server can now access the <code>input$delete_alert</code> input which is by default <code>NULL</code> and set to <code>TRUE</code> when the user has pressed “OK,” as done in the application below which prints the input to the console when the button is clicked.</p>
<div class="sourceCode" id="cb129"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb129-1"><a href="a-first-look-alerts.html#cb129-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb129-2"><a href="a-first-look-alerts.html#cb129-2"></a></span>
<span id="cb129-3"><a href="a-first-look-alerts.html#cb129-3"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb129-4"><a href="a-first-look-alerts.html#cb129-4"></a>  tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb129-5"><a href="a-first-look-alerts.html#cb129-5"></a>    <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb129-6"><a href="a-first-look-alerts.html#cb129-6"></a><span class="st">      alert(message);</span></span>
<span id="cb129-7"><a href="a-first-look-alerts.html#cb129-7"></a><span class="st">      Shiny.setInputValue(&#39;delete_alert&#39;, true);</span></span>
<span id="cb129-8"><a href="a-first-look-alerts.html#cb129-8"></a><span class="st">    });&quot;</span></span>
<span id="cb129-9"><a href="a-first-look-alerts.html#cb129-9"></a>  ),</span>
<span id="cb129-10"><a href="a-first-look-alerts.html#cb129-10"></a>  <span class="kw">h1</span>(<span class="st">&quot;Hello&quot;</span>)</span>
<span id="cb129-11"><a href="a-first-look-alerts.html#cb129-11"></a>)</span>
<span id="cb129-12"><a href="a-first-look-alerts.html#cb129-12"></a></span>
<span id="cb129-13"><a href="a-first-look-alerts.html#cb129-13"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb129-14"><a href="a-first-look-alerts.html#cb129-14"></a>  session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="dt">type =</span> <span class="st">&quot;send-alert&quot;</span>, <span class="dt">message =</span> <span class="st">&quot;Deleting a record!&quot;</span>)</span>
<span id="cb129-15"><a href="a-first-look-alerts.html#cb129-15"></a></span>
<span id="cb129-16"><a href="a-first-look-alerts.html#cb129-16"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>delete_alert, {</span>
<span id="cb129-17"><a href="a-first-look-alerts.html#cb129-17"></a>    <span class="co"># print TRUE when button is clicked</span></span>
<span id="cb129-18"><a href="a-first-look-alerts.html#cb129-18"></a>    <span class="kw">print</span>(input<span class="op">$</span>delete_alert) </span>
<span id="cb129-19"><a href="a-first-look-alerts.html#cb129-19"></a>  })</span>
<span id="cb129-20"><a href="a-first-look-alerts.html#cb129-20"></a>}</span>
<span id="cb129-21"><a href="a-first-look-alerts.html#cb129-21"></a></span>
<span id="cb129-22"><a href="a-first-look-alerts.html#cb129-22"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<p>Note that Shiny performs optimisations on how those values are set. First, if the input is set to the same value then Shiny ignores it. This is fine if you are interested in the actual value of the input but will not work as expected if the input is to be used as event. Indeed if you want to use this input in an <code>observe</code>, <code>observeEvent</code>, or <code>eventReactive</code>, you want it to be triggered every time the input changes, regardless of whether that value is the same as before. The second optimisation Shiny does is when the input is set to multiple different values before these have been processed then only the most recent value will actually be sent to the server. One can opt-out of these optimisations using the <code>priority: "event"</code> option when setting the input value.</p>
<div class="sourceCode" id="cb130"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb130-1"><a href="a-first-look-alerts.html#cb130-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb130-2"><a href="a-first-look-alerts.html#cb130-2"></a></span>
<span id="cb130-3"><a href="a-first-look-alerts.html#cb130-3"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb130-4"><a href="a-first-look-alerts.html#cb130-4"></a>  tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb130-5"><a href="a-first-look-alerts.html#cb130-5"></a>    <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb130-6"><a href="a-first-look-alerts.html#cb130-6"></a><span class="st">      alert(message);</span></span>
<span id="cb130-7"><a href="a-first-look-alerts.html#cb130-7"></a><span class="st">      Shiny.setInputValue(&#39;delete_alert&#39;, true, {priority: &#39;event&#39;});</span></span>
<span id="cb130-8"><a href="a-first-look-alerts.html#cb130-8"></a><span class="st">    });&quot;</span></span>
<span id="cb130-9"><a href="a-first-look-alerts.html#cb130-9"></a>  ),</span>
<span id="cb130-10"><a href="a-first-look-alerts.html#cb130-10"></a>  <span class="kw">h1</span>(<span class="st">&quot;Hello&quot;</span>)</span>
<span id="cb130-11"><a href="a-first-look-alerts.html#cb130-11"></a>)</span>
<span id="cb130-12"><a href="a-first-look-alerts.html#cb130-12"></a></span>
<span id="cb130-13"><a href="a-first-look-alerts.html#cb130-13"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb130-14"><a href="a-first-look-alerts.html#cb130-14"></a>  session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="dt">type =</span> <span class="st">&quot;send-alert&quot;</span>, <span class="dt">message =</span> <span class="st">&quot;Deleting a record!&quot;</span>)</span>
<span id="cb130-15"><a href="a-first-look-alerts.html#cb130-15"></a></span>
<span id="cb130-16"><a href="a-first-look-alerts.html#cb130-16"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>delete_alert, {</span>
<span id="cb130-17"><a href="a-first-look-alerts.html#cb130-17"></a>    <span class="co"># print TRUE when button is clicked</span></span>
<span id="cb130-18"><a href="a-first-look-alerts.html#cb130-18"></a>    <span class="kw">print</span>(input<span class="op">$</span>delete_alert) </span>
<span id="cb130-19"><a href="a-first-look-alerts.html#cb130-19"></a>  })</span>
<span id="cb130-20"><a href="a-first-look-alerts.html#cb130-20"></a>}</span>
<span id="cb130-21"><a href="a-first-look-alerts.html#cb130-21"></a></span>
<span id="cb130-22"><a href="a-first-look-alerts.html#cb130-22"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div id="deserialise" class="section level2 unnumbered" number="">
<h2>Deserialise</h2>
<p>In the section on sending data from R to JavaScript we used a “message handler” in JavaScript to handle the data coming from the server. There is also the corollary, an “input handler” to preprocess the data coming from JavaScript before it is made accessible by the input. In R, this is a function that must accept three arguments, the data coming JavaScript, a shiny session, and the name of the input. Note that all of these arguments are mandatory even if they are used in the function.</p>
<p>Input handlers are most often used to reshape or change the type of the data coming in. To demonstrate how use them, we create a handler for the <code>delete_alert</code> which adds some admittedly useless meta information to the data.</p>
<div class="sourceCode" id="cb131"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb131-1"><a href="a-first-look-alerts.html#cb131-1"></a><span class="co"># create handler</span></span>
<span id="cb131-2"><a href="a-first-look-alerts.html#cb131-2"></a>process_input &lt;-<span class="st"> </span><span class="cf">function</span>(x, session, inputname){</span>
<span id="cb131-3"><a href="a-first-look-alerts.html#cb131-3"></a>  data &lt;-<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb131-4"><a href="a-first-look-alerts.html#cb131-4"></a>    <span class="dt">data =</span> x,</span>
<span id="cb131-5"><a href="a-first-look-alerts.html#cb131-5"></a>    <span class="dt">meta =</span> <span class="st">&quot;This is some meta-data&quot;</span></span>
<span id="cb131-6"><a href="a-first-look-alerts.html#cb131-6"></a>  )</span>
<span id="cb131-7"><a href="a-first-look-alerts.html#cb131-7"></a>  <span class="kw">return</span>(data)</span>
<span id="cb131-8"><a href="a-first-look-alerts.html#cb131-8"></a>}</span></code></pre></div>
<p>Once this function created it needs to be registered with shiny using the <code>registerInputHandler</code> function which takes two arguments. First, a unique identifier for the handler, second, the handler function. Attempt to give the handler a unique yet simple name (alphanumeric characters, underscores, and periods) to avoid clashes with other handlers.</p>
<div class="sourceCode" id="cb132"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb132-1"><a href="a-first-look-alerts.html#cb132-1"></a><span class="co"># register with shiny</span></span>
<span id="cb132-2"><a href="a-first-look-alerts.html#cb132-2"></a><span class="kw">registerInputHandler</span>(<span class="st">&quot;alert.processor&quot;</span>, process_input)</span></code></pre></div>
<p>Note that handlers can only be registered once, running the above twice will fail the second time, even if the handler function has changed. Thus, the handler can be overwritten by setting <code>force</code> to <code>TRUE</code>.</p>
<div class="sourceCode" id="cb133"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb133-1"><a href="a-first-look-alerts.html#cb133-1"></a><span class="co"># register with shiny</span></span>
<span id="cb133-2"><a href="a-first-look-alerts.html#cb133-2"></a><span class="kw">registerInputHandler</span>(<span class="st">&quot;alert.processor&quot;</span>, process_input, <span class="dt">force =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<p>Once the handler function created and registered with shiny what is left to do is tell shiny which input should use that handler. This is done by adding the name of the handler, <code>alert.processor</code>, preceded by a colon (<code>:alert.processor</code>) as a suffix to the input name.</p>
<div class="sourceCode" id="cb134"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb134-1"><a href="a-first-look-alerts.html#cb134-1"></a><span class="va">Shiny</span>.<span class="at">setInputValue</span>(<span class="st">&#39;delete_alert:alert.processor&#39;</span><span class="op">,</span> <span class="kw">true</span><span class="op">,</span> <span class="op">{</span><span class="dt">priority</span><span class="op">:</span> <span class="st">&#39;event&#39;</span><span class="op">}</span>)<span class="op">;</span></span></code></pre></div>
<p>We can then recap to see what the application would look like now.</p>
<div class="sourceCode" id="cb135"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb135-1"><a href="a-first-look-alerts.html#cb135-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb135-2"><a href="a-first-look-alerts.html#cb135-2"></a></span>
<span id="cb135-3"><a href="a-first-look-alerts.html#cb135-3"></a><span class="co"># create handler</span></span>
<span id="cb135-4"><a href="a-first-look-alerts.html#cb135-4"></a>process_input &lt;-<span class="st"> </span><span class="cf">function</span>(x, session, inputname){</span>
<span id="cb135-5"><a href="a-first-look-alerts.html#cb135-5"></a>  data &lt;-<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb135-6"><a href="a-first-look-alerts.html#cb135-6"></a>    <span class="dt">data =</span> x,</span>
<span id="cb135-7"><a href="a-first-look-alerts.html#cb135-7"></a>    <span class="dt">meta =</span> <span class="st">&quot;This is some meta-data&quot;</span></span>
<span id="cb135-8"><a href="a-first-look-alerts.html#cb135-8"></a>  )</span>
<span id="cb135-9"><a href="a-first-look-alerts.html#cb135-9"></a>  <span class="kw">return</span>(data)</span>
<span id="cb135-10"><a href="a-first-look-alerts.html#cb135-10"></a>}</span>
<span id="cb135-11"><a href="a-first-look-alerts.html#cb135-11"></a></span>
<span id="cb135-12"><a href="a-first-look-alerts.html#cb135-12"></a><span class="co"># register with shiny</span></span>
<span id="cb135-13"><a href="a-first-look-alerts.html#cb135-13"></a><span class="kw">registerInputHandler</span>(<span class="st">&quot;alert.processor&quot;</span>, process_input)</span>
<span id="cb135-14"><a href="a-first-look-alerts.html#cb135-14"></a></span>
<span id="cb135-15"><a href="a-first-look-alerts.html#cb135-15"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb135-16"><a href="a-first-look-alerts.html#cb135-16"></a>  tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb135-17"><a href="a-first-look-alerts.html#cb135-17"></a>    <span class="st">&quot;Shiny.addCustomMessageHandler(type = &#39;send-alert&#39;, function(message) {</span></span>
<span id="cb135-18"><a href="a-first-look-alerts.html#cb135-18"></a><span class="st">      alert(message);</span></span>
<span id="cb135-19"><a href="a-first-look-alerts.html#cb135-19"></a><span class="st">      Shiny.setInputValue(&#39;delete_alert:alert.processor&#39;, true, {priority: &#39;event&#39;});</span></span>
<span id="cb135-20"><a href="a-first-look-alerts.html#cb135-20"></a><span class="st">    });&quot;</span></span>
<span id="cb135-21"><a href="a-first-look-alerts.html#cb135-21"></a>  ),</span>
<span id="cb135-22"><a href="a-first-look-alerts.html#cb135-22"></a>  <span class="kw">h1</span>(<span class="st">&quot;Hello&quot;</span>)</span>
<span id="cb135-23"><a href="a-first-look-alerts.html#cb135-23"></a>)</span>
<span id="cb135-24"><a href="a-first-look-alerts.html#cb135-24"></a></span>
<span id="cb135-25"><a href="a-first-look-alerts.html#cb135-25"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb135-26"><a href="a-first-look-alerts.html#cb135-26"></a>  session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="dt">type =</span> <span class="st">&quot;send-alert&quot;</span>, <span class="dt">message =</span> <span class="st">&quot;Deleting a record!&quot;</span>)</span>
<span id="cb135-27"><a href="a-first-look-alerts.html#cb135-27"></a></span>
<span id="cb135-28"><a href="a-first-look-alerts.html#cb135-28"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>delete_alert, {</span>
<span id="cb135-29"><a href="a-first-look-alerts.html#cb135-29"></a>    <span class="kw">print</span>(input<span class="op">$</span>delete_alert) </span>
<span id="cb135-30"><a href="a-first-look-alerts.html#cb135-30"></a>  })</span>
<span id="cb135-31"><a href="a-first-look-alerts.html#cb135-31"></a>}</span>
<span id="cb135-32"><a href="a-first-look-alerts.html#cb135-32"></a></span>
<span id="cb135-33"><a href="a-first-look-alerts.html#cb135-33"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<p>The previous section on the input handler is entirely optional but as we will see in later parts of the book it can be nice touch in some cases.</p>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="introduction-1.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="a-complete-integration-jbox-js.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/r-and-javascript/edit/master/11-shiny-first-look.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
